import { inject, observer } from 'mobx-react';
import { WeaTools, WeaProgress, WeaDialog, WeaNewScroll, WeaRightMenu, WeaAlertPage } from 'ecCom';
import { Button, Spin } from 'antd';
import BaseList from '../BaseList';
import SellChanceReport from './Report';
import { toJS } from 'mobx';
import { WeaTableNew } from 'comsMobx';
import * as Bctt from '../../constants/BaseListConstant';
import { WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

@inject('chanceReportDetailStore')
@observer
class ReportDetail extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const store = this.props.chanceReportDetailStore;
    const { initResponsed, initSuccessed, initFailedMsg } = store;
    if (initResponsed) {
      if (initSuccessed) {
        const { loading, title, tableStore } = store;
        // WeaTable中的属性集
        const weaTableProps = {};
        weaTableProps.comsWeaTableStore = tableStore;
        weaTableProps.hasOrder = true;
        weaTableProps.needScroll = true;
        weaTableProps.uniqueId = true;
        const tableCom = <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@rk9xiy`} {...weaTableProps} />;
        return (
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@5541tn`} datas={this.getRightMenus()} onClick={this.rightMenuClick.bind(this)} >
            {tableCom}
          </WeaRightMenu>
        );
      }
      return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@2rw8l5`}><div style={{ color: '#000' }}>{initFailedMsg}</div></WeaAlertPage>;
    }
    return <div style={{ position: 'absolute', width: '100%', top: '48%', textAlign: 'center' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@wa3b9a`} spinning /></div>;
  }

  componentWillMount() {
    const { chanceReportDetailStore, params } = this.props;
    chanceReportDetailStore.doNew(params);
  }

  componentDidMount() {
    const store = this.props.chanceReportDetailStore;
    const { params } = store;
    store.doInit(params);
  }

  componentWillUnmount() {
    const store = this.props.chanceReportDetailStore;
    store.doClear();
  }

  componentWillReceiveProps(nextProps) {

  }

  getButtons() {
    const store = this.props.chanceReportDetailStore;
    const { rightMenu, tableStore } = store;
    const btnArr = [];
    rightMenu && rightMenu.length > 0 && rightMenu.map((m) => {
      m.isTop == '1' && btnArr.length < 4 && btnArr.push(
        <Button
          ecId={`${this && this.props && this.props.ecId || ''}_Button@z1eloo@${m.type}`}
          type="primary"
          disabled={m.isControl == '1' && toJS(tableStore.selectedRowKeys).length == 0}
          onClick={() => {
            this.rightMenuClick(m.type);
          }}
        >
          {m.menuName}
        </Button>,
      );
    });
    return btnArr;
  }

  getRightMenus() {
    const store = this.props.chanceReportDetailStore;
    const { rightMenu, tableStore } = store;
    const btnArr = [];
    rightMenu && rightMenu.length > 0 && rightMenu.map((m) => {
      btnArr.push({
        key: m.type,
        icon: <i className={m.menuIcon} />,
        content: m.menuName,
        onClick: (key) => {
          if (key == 'BTN_COLUMN') {
            store.tableStore.setColSetVisible(true);
            store.tableStore.tableColSet(true);
          } else if (key == 'BTN_SEARCH') {
            store.doSearch();
          } else {
            this.rightMenuClick(key);
          }
        },
      });
    });
    return btnArr;
  }

  rightMenuClick(key) {
    const store = this.props.chanceReportDetailStore;
    if (key == 'BTN_EXPORT') {
      store.excelExport();
    }
  }
}

export default WeaTools.tryCatch(React, props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@c4l2mk`} msg={props.error ? props.error : getLabel(129417, '服务器运行出错，请联系系统管理员！')} />, { error: '' })(ReportDetail);
